<template>
	<view class="container">
		<!-- 申请页-->
		<view class="wxad">
			<ad unit-id="adunit-32ee9f1ef2bea9fa" @error="offAd" @close="offAd"></ad>
		</view>
		<!-- 表单部分 -->
		<view class="form">
			<u-form label-width="auto">
				<u-form-item label="合伙人类型">
					<u-input placeholder="请选择合伙人类型" v-model="userTypeText" type="select"
						@click="userTypeSelectShow = true" />
					<u-select v-model="userTypeSelectShow" :list="partnerTypes" @confirm="userTypeConfirm"
						confirm-color="#07C160"></u-select>
				</u-form-item>
				<u-form-item label="合伙人城市">
					<u-input placeholder="请选择合伙人城市" v-model="cityName" type="select" @click="citySelectShow = true" />
					<u-select v-model="citySelectShow" mode="mutil-column-auto" :list="cityList"
						@confirm="citySelectConfirm" value-name="id" label-name="name"
						confirm-color="#07C160"></u-select>
				</u-form-item>
				<u-form-item v-if="userType==3" label="合伙人街道">
					<u-input placeholder="请选择合伙人街道" v-model="streetName" type="select"
						@click="streetSelectShow = true" />
					<u-select v-model="streetSelectShow" :list="streetList" @confirm="streetSelectConfirm"
						value-name="id" label-name="name" confirm-color="#07C160"></u-select>
				</u-form-item>
			</u-form>
		</view>
		<!-- 提交按钮 -->
		<u-button :custom-style="submitButtonStyle" @click="submitApplication">提交申请</u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				images: [
					'/static/image1.jpg', // 替换为实际图片路径
					'/static/image2.jpg',
					'/static/image3.jpg'
				],
				partnerTypes: [{
					value: 2,
					label: "市级合伙人"
				}, {
					value: 3,
					label: "乡镇合伙人"
				}],
				userType: '',
				userTypeText: '',
				cityName: '',
				cityId: '',
				userTypeSelectShow: false,
				citySelectShow: false,
				cityList: [],
				streetList: [],
				streetId: '',
				streetName: '',
				streetSelectShow: false,
				submitButtonStyle: {
					marginTop: '80rpx',
					width: '500rpx',
					color: '#07C160'
				}
			};
		},
		onShow() {
			this.getCityListNew()
		},
		methods: {
			getCityListNew(pid = 0) {
				this.$api.request({
					url: this.$api.getCityListNew,
					data: {
						pid
					}
				}).then(res => {
					if (pid == 0) {
						this.cityList = res.data;
					} else {
						this.streetList = res.data;
					}
				})
			},
			citySelectConfirm(e) {
				this.cityId = e[2].value;
				this.cityName = e[2].label;
				this.getCityListNew(this.cityId);
			},
			streetSelectConfirm(e) {
				this.streetId = e[0].value;
				this.streetName = e[0].label;
			},
			userTypeConfirm(e) {
				this.userTypeText = e[0].label;
				this.userType = e[0].value;
			},
			onTypeChange(e) {
				this.form.userType = this.partnerTypes[e.detail.value];
			},
			submitApplication() {
				if (!this.userType || !this.cityId || (this.userType == 3 && !this.streetId)) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				let params = {
					userType: this.userType,
					cityName: this.userType == 2 ? this.cityId : this.streetId
				};
				this.$api.request({
					url: this.$api.saveCityPartner,
					method: "POST",
					data: params
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '申请已提交',
							icon: 'success'
						});
						uni.redirectTo({
							url: "/pages/my/partner/index"
						})
					}
				})
			}
		}
	};
</script>

<style scoped>
	.wxad {
		position: relative;
		width: 710rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	/* 页面整体样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFF;
		padding: 20px;
	}

	/* 轮播图样式 */
	.swiper {
		width: 100%;
		height: 200px;
		margin-bottom: 20px;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}

	.form {
		width: 100%;
	}
</style>